<template>
  <div>
    <van-pull-refresh v-model="inventoryRefreshing" @refresh="inventoryOnRefresh">
      <van-list
        id="inventory"
        v-model="inventoryLoading"
        :finished="inventoryFinished"
        finished-text="没有更多了"
        @load="inventoryLoad"
      >
        <!-- style="min-height: 400px" -->
        <van-row class="card" v-for="(item,index) in inventoryList" :key="item.id">
          <div @click="showInventoryDetail(index)" style="display:flex">
            <div style="width:80%">
              <van-cell
                :border="false"
                value-class="inventoryPlanTitle textLeft"
                :value="item.name"
              />
              <div>
                <span class="planDetailInfo">{{'计划编码：'+item.code}}</span>
                <span class="planDetailInfo">开始时间：{{startDateFormated(item.startDate)}}</span>
                <span class="planDetailInfo">{{'仓库名称：'+item.warehouseName}}</span>
              </div>
            </div>
            <div style="width:20%;display: flex">
              <van-cell
                :border="false"
                :value-class="getInventoryStateStr(item.state)"
                :value="getInventoryStateStr(item.state)"
                style="margin:auto;padding:0"
              />
            </div>
          </div>
        </van-row>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import Toast from "@/utils/toast";
import consts from "@/utils/consts";
import dateFormat from "dateformat";
export default {
  name: "Inventory",
  props: ["keywords", "state"],
  data() {
    return {
      page: 0,
      pageSize: 10,
      totalCount: 0,
      pageCount: 0,
      order: "",

      inventoryList: [],
      // inventoryListCopy: [],
      inventoryLoading: false,
      inventoryFinished: false,
      inventoryRefreshing: false,
      isInventoryOrderByState: false
    };
  },
  methods: {
    inventoryLoad() {
      this.inventoryLoading = true;
      console.log("inventoryLoad");
      let param = {
        page: this.page + 1,
        pageSize: this.pageSize,
        name: this.keywords,
        // state: this.state == consts.allState ? null : this.state
        state: 5
      };
      // 异步更新数据
      http
        .fetchGet(api.checkStockPlanPage, param)
        .then(data => {
          if (!data.data || data.page >= data.pageCount) {
            this.inventoryFinished = true;
          }
          this.page = data.page;

          this.inventoryList = this.inventoryList.concat(data.data);
          // this.filterData();
          this.inventoryLoading = false;
          // console.log("loading: " + this.inventoryLoading);

          // this.inventoryFinished = true;
        })
        .catch(err => {
          this.inventoryLoading = false;
          this.inventoryFinished = true;
        });
    },
    inventoryOnRefresh(isSearch = false) {
      console.log("inventoryOnRefresh");
      this.page = 0;
      let param = {
        page: this.page + 1,
        pageSize: this.pageSize,
        name: this.keywords,
        state: 5
      };
      // 异步更新数据
      http
        .fetchGet(api.checkStockPlanPage, param)
        .then(data => {
          if (!data.data || data.page >= data.pageCount) {
            this.inventoryFinished = true;
          }
          this.inventoryList = data.data;

          // this.filterData();
          this.inventoryRefreshing = false;
          // this.inventoryFinished = true;
          if (isSearch) {
            // Toast.success("检索成功");
          } else {
            Toast.toast("刷新成功");
          }
        })
        .catch(err => {
          this.inventoryRefreshing = false;
          this.inventoryFinished = true;
        });
    },
    checkAvaible(inventory) {
      let now = new Date();
      let start = new Date(inventory.startDate + "+0800");
      if (now.getTime() < start.getTime()) {
        Toast.toast("盘库还未开始！", false);
        return false;
      }
      let end = new Date(this.endDate);
      if (now.getTime() > end.getTime()) {
        Toast.toast("盘库已经结束！", false);
        return false;
      }
      if (inventory.state === 3) {
        Toast.toast("已审核通过，无法扫码", false);
        return false;
      }
      if (inventory.state === 4) {
        Toast.toast("已作废，无法扫码", false);
        return false;
      }
      return true;
    },
    showInventoryDetail(index) {
      let inventory = this.inventoryList[index];
      if (!this.checkAvaible(inventory)) {
        return;
      }
      this.$router.push({
        path: "/inventoryDetail",
        query: {
          id: inventory.id,
          name: inventory.name,
          startDate: inventory.startDate,
          endDate: inventory.endDate,
          state: inventory.state
        }
      });
      console.log("showInventoryDetail:" + index);
    },
    getInventoryStateStr(state) {
      if (state == 0) {
        return "未执行";
      } else if (state == 1) {
        return "进行中";
      } else if (state == 2) {
        return "已提交";
      } else if (state == 3) {
        return "审核通过";
      } else if (state == 4) {
        return "作废";
      }
    },
    startDateFormated(date) {
      // console.log(date + "+0800");
      // return new Date(date + "+0800").getTime();
      // return date;
      // var date = new Date(date);
      // return (
      //   date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
      // );
      return dateFormat(date + "+0800", "isoDate");
    }
    // filterData() {
    //   this.inventoryListCopy = this.inventoryList.filter(item => {
    //     return (
    //       (!this.keywords ||
    //         (item.name &&
    //           item.name.toLowerCase().search(this.keywords.toLowerCase()) !=
    //             -1)) &&
    //       (!this.state || this.state == 0 || item.state == this.state)
    //     );
    //   });
    // }
  },
  watch: {
    keywords() {
      this.inventoryOnRefresh(true);
      // this.filterData();
    },
    state() {
      this.inventoryOnRefresh(true);
      // this.filterData();
    }
  }
  // created() {
  //   if (this.inventoryList.length == 0) {
  //     this.inventoryLoad();
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.card {
  // border-width: 0 0 1px 0;
  // border-style: solid;
  // border-color: #cccccc;
  // margin-left: 5px;
  // margin-right: 5px;
  // background-color: white;
  // width: auto;
  // padding: 5px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  background-color: white;
  width: auto;
  padding: 14px 16px 14px 16px;
}

.van-cell {
  padding: 0;
}

.inventoryPlanTitle {
  // font-weight: 800;
  // font-size: 20px;
  // color: black;
  // display: block;
  // text-align: left;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;

  font-size: 26px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 37px;
  letter-spacing: 1px;
}

.planDetailInfo {
  // font-weight: 500;
  // font-size: 15px;
  // color: #8a8a8a;
  display: block;
  text-align: left;

  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 30px;
  letter-spacing: 1px;
}

.textLeft {
  text-align: left;
}

.textLeft {
  text-align: left;
}
.未执行 {
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(229, 0, 0, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
.进行中 {
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
.已提交 {
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(71, 124, 236, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
.审核通过 {
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(117, 222, 60, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
.作废 {
  text-align: center;
  text-align: center;
  font-size: 22px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(229, 0, 0, 1);
  line-height: 30px;
  letter-spacing: 1px;
}
</style>
